<template>
    <div class="favorite-music-container">
        <div class="music-list-header">
            <n-button type="primary" class="btn" @click="randomPlay">
                添加到歌曲列表
            </n-button>
        </div>
        <song-item
            v-for="(song, index) of songList"
            :key="song.id"
            :song="song"
            :index="index"
            :type="SONG_ITEM_TYPE.LARGE"
            @click="playThisSong(song)"
        ></song-item>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineComponent } from "vue";
import SongItem from "@/components/song-item.vue";
import { selectStarredSongs } from "../api/modules/song";
import { AxiosResponse } from "axios";
import { ISongItem } from "@/types/song-item";
import { useStore } from "vuex";
import { NButton } from "naive-ui";
import { SONG_ITEM_TYPE } from "@/constant/song";
const store = useStore();

const songList: any = ref([]);
selectStarredSongs({
    _end: 50,
    _order: "ASC",
    _sort: "title",
    _start: 0,
    title: "",
}).then((res: AxiosResponse) => {
    songList.value.push(...res.data);
});
const playThisSong = function (song: ISongItem) {
    store.dispatch("play/updatePlayingInfo", song);
};

defineComponent({
    components: {
        NButton,
    },
});

// 随机播放
const randomPlay = function () {
    // 添加到待播放列表
    store.dispatch("play/add2ReadyList", songList.value);
    // 竞选当前播放的歌曲
    store.dispatch("play/campaign4Song");
};
</script>

<style scoped lang="less">
.favorite-music-container {
    .music-list-header {
        padding: 0 46px;
    }
}
</style>
